﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>学生信息管理</title>
	<style type="text/css">
		table {
			margin: auto;
			width: 480px;
			border-collapse: collapse;
		}
		
		td, th{
			padding: 5px;
		}
		
		th {
			background-color: lightblue;
		}
		
		tr:hover {
			background-color: yellow;
		}
		
		div {
			margin: auto;
			width: 520px;
		}
	</style>
	<script type="text/javascript">
		//添加一行
		function addRow () {
			//1.得到文本框的值
			var no = document.getElementById("no").value;
			var name = document.getElementById("name").value;
			//2. 创建文本节点
			var txtNo = document.createTextNode(no);
			//3. 创建td
			var td1= document.createElement("td");
			td1.appendChild(txtNo);
			
			//创建第2个td
			var td2 = document.createElement("td");
			td2.innerHTML = name;
			
			//创建第3个td
			var td3 = document.createElement("td");
			td3.innerHTML = "<a href=\"javascript:void(0)\" onclick=\"deleteRow(this)\">删除</a>";
			
			//4. 创建tr
			var tr = document.createElement("tr");
			tr.appendChild(td1);
			tr.appendChild(td2);
			tr.appendChild(td3);
			//5. 把tr追加成tbody的子元素
			var tbody = document.getElementById("data");
			tbody.appendChild(tr);
			//清空元素
			document.getElementById("no").value = "";
			document.getElementById("name").value = "";
		}
		
		//删除一行
		function deleteRow (obj) {
			if (confirm("真的要删除吗")) {
				//通过tbody删除tr
				var tr = obj.parentNode.parentNode;
				//remove()删除自己, removeChild()删除子元素
				tr.remove();
			}
		}
	</script>
</head>
<body>
	<div>
	<table border="1" cellspacing="0" cellpadding="3">
		<tbody id="data">
		<tr>
			<th>学号</th>
			<th>姓名</th>
			<th>操作</th>
		</tr>
		<tr>
			<td>00001</td>
			<td>潘金莲</td>
			<td>
				<!--href不是跳转到其它的页面去，而是执行JS代码, void(0)表示让href不起作用-->
				<a href="javascript:void(0)" onclick="deleteRow(this)">删除</a>
			</td>
		</tr>
		<tr>
			<td>00002</td>
			<td>鲁智深</td>
			<td>
				<a href="javascript:void(0)" onclick="deleteRow(this)">删除</a>
			</td>
		</tr>
		</tbody>
	</table>
	<br />
	学号：<input type="text" id="no" value="" />
	姓名：<input type="text" id="name" value="" />
	<input type="button" id="addBtn" value="添加" onclick="addRow()"/>
	</div>
</body>
</html>
